webpack - eslint

eslint : 它的目标是提供一个插件化的javascript代码检测工具。

需要安装的库

• eslint
• eslint-loader
• eslint-config-airbnb-base : 我们选用的检测标准为 airbnb 公司的规范。
• eslint-plugin-import

npm install eslint eslint-loader eslint-config-airbnb-base eslint-plugin-import -D

开始配置。

其中几个注意点：

• 只检查js文件，并且是自己写的代码，无需检查node_modules中的js文件；
• 需要在package.json或.eslintrc中添加eslintConfig,来设置检查规则；

webpack.config.js添加loader

  // 添加eslint
  {
    // 只检查js文件
    test: /.js$/,
    loader: 'eslint-loader',
    // 只需要检查自己写的代码，不需要检查node_modules
    exclude: /node_modules/,
    options: {}
  }

package.json添加eslintConfig相关设置，具体设置：eslint-config-airbnb-base

  "eslintConfig":{
    "extends": "airbnb-base"
  }

直接构建，会看到构建出错了。

可以看到，都是eslint的规则报错了。

错误1：

Expected linebreaks to be 'LF' but found 'CRLF'如果也同样出现这个错误，我们可以在eslintConfig中添加rules

  "eslintConfig":{
    "extends": "airbnb-base",
    "rules": {
      "linebreak-style": ["off", "windows"]
    }
  }

重新构建，就可以看到 少了 刚才的错误。

其余的错误就根据具体错误，具体处理即可。

也可以通过设置fix进行自动修复

// 添加eslint
{
  // 只检查js文件
  test: /.js$/,
  loader: 'eslint-loader',
  // 只需要检查自己写的代码，不需要检查node_modules
  exclude: /node_modules/,
  options: {
    fix: true,
  }
},

注意：后续的工程会先将eslint屏蔽掉

eslint有两种方式可以屏蔽校验：

• eslint-disable-next-line：忽略下面一行代码的校验；
• eslint-disable：忽略该文件中的所有校验警告；

另外，如果需要配置规则，就在eslintConfig的中rules设置即可。具体可以参考eslint rules。

本章结束！